<template>
	<view>
		<view class="certificate-container">
			<text class="title">证书预览</text>
			<view class="certificate-image-container">
				<image 
					v-if="certificateImage" 
					:src="certificateImage" 
					mode="aspectFit" 
					class="certificate-image"
				></image>
				<view v-else class="loading-placeholder">
					<text>证书加载中...</text>
				</view>
			</view>
			<button class="download-btn" @click="downloadCertificate" :disabled="!certificateImage">
				下载证书
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {},
				certificateImage: ''
			};
		},
		onLoad(options) {
			this.params = options;
			this.loadCertificateImage();
		},
		methods: {
			loadCertificateImage() {
				const { classId, className, createTime, name, studentId,id } = this.params;
				
				// 调用后端接口获取图片
				uni.request({
					url: 'http://localhost:9090/user/getDownloadImg',
					method: 'POST',
					responseType: 'arraybuffer', // 重要：指定返回类型为二进制数据
					data: { classId, className, createTime, name, studentId,id },
					success: (res) => {
						// 将二进制数据转换为Base64
						const base64 = uni.arrayBufferToBase64(res.data);
						// 构建DataURL
						this.certificateImage = `data:image/png;base64,${base64}`;
					},
					fail: (err) => {
						console.error('获取证书图片失败:', err);
						uni.showToast({
							title: '加载证书失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			downloadCertificate() {
				if (!this.certificateImage) return;
				
				// 提取Base64数据部分
				const base64Data = this.certificateImage.split(',')[1];
				const name = this.params.name
				const className = this.params.className
				// 创建临时文件并保存
				const fs = uni.getFileSystemManager();
				const filePath = `${uni.env.USER_DATA_PATH}/${name}-${className}结业证书.png`;

				fs.writeFile({
					filePath,
					data: base64Data,
					encoding: 'base64',
					success: () => {
						// 保存到相册
						uni.saveImageToPhotosAlbum({
							filePath,
							success: () => {
								uni.showToast({
									title: '证书已保存到相册',
									icon: 'success'
								});
							},
							fail: (err) => {
								console.error('保存失败:', err);
								// 尝试打开文件预览
								uni.showModal({
									title: '保存失败',
									content: '无法直接保存到相册，是否打开预览？',
									success: (res) => {
										if (res.confirm) {
											uni.previewImage({
												current: this.certificateImage,
												urls: [this.certificateImage]
											});
										}
									}
								});
							}
						});
					},
					fail: (err) => {
						console.error('写入文件失败:', err);
						uni.showToast({
							title: '生成失败，请重试',
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>

<style scoped>
	.certificate-container {
		padding: 20px;
	}
	
	.title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 15px;
		display: block;
	}
	
	.certificate-image-container {
		border: 1px solid #eee;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 20px;
		height: 400px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f9f9f9;
	}
	
	.certificate-image {
		max-width: 100%;
		max-height: 100%;
	}
	
	.loading-placeholder {
		font-size: 16px;
		color: #999;
	}
	
	.download-btn {
		padding: 12px;
		background-color: #007aff;
		color: white;
		border-radius: 6px;
		font-size: 18px;
		width: 100%;
		box-sizing: border-box;
	}
	
	.download-btn[disabled] {
		background-color: #cccccc;
	}
</style>